<template>
	<view class="img_content">
		<u--image :showLoading="true" :width="realWidth" :height="realHeight" v-for="(item,index) in realSrcList"
			:src="item" @click="previewImage(item,index)"></u--image>


		<u-modal :show="imgFlg" title="文件预览" :closeOnClickOverlay="true" :showConfirmButton="false" cancelText="关闭"
			@cancel="updateImgFlg(false)" :showCancelButton="true">
			<u--image :showLoading="true" :src="currentSrc" width="550rpx"></u--image>

		</u-modal>
	</view>
</template>

<script>
	import {
		HOST_H5,
		filePreviewUrl
	} from '@/config/env.js'
	export default {
		name: "ImagePreview",
		props: {
			src: {
				type: String,
				default: ""
			},
			width: {
				type: [Number, String],
				default: "200rpx"
			},
			height: {
				type: [Number, String],
				default: "200rpx"
			}
		},
		computed: {
			realSrc() {
				if (!this.src) {
					return;
				}
				let real_src = this.src.split(",")[0];

				return filePreviewUrl + real_src;
			},
			realSrcList() {
				if (!this.src) {
					return;
				}
				let real_src_list = this.src.split(",");
				let srcList = [];
				real_src_list.forEach(item => {
					console.log(filePreviewUrl + item)
					return srcList.push(filePreviewUrl + item);
				});
				return srcList;
			},
			realWidth() {
				return typeof this.width == "string" ? this.width : `${this.width}px`;
			},
			realHeight() {
				return typeof this.height == "string" ? this.height : `${this.height}px`;
			}
		},
		data() {
			return {
				currentSrc: '',
				imgFlg: false,
			};
		},
		methods: {
			imagePreview(item) { //废弃
				this.imgFlg = true;
				this.currentSrc = item

			},
			//图片预览
			previewImage(url, index) {

				// 支持网络图片和本地图片
				uni.previewImage({
					urls: this.realSrcList, // 图片地址数组
					current: index, // 当前显示图片的索引
					success: () => {
						console.log('预览成功');
					},
					fail: (err) => {
						console.error('预览失败：', err);
					}
				});
			},
			//废弃
			updateImgFlg(flg) {
				this.imgFlg = flg
			}
		}
	}
</script>

<style scoped lang="scss">
	.img_content {
		display: flex;

		::v-deep .u-image {
			margin-right: 20rpx;
			border: 1rpx solid #ccc;
		}
	}
</style>